<template>
  <view>
    <!-- 搜索框组件 -->
    <view>
      <seachInput />
    </view>

    <!-- tab栏 -->
    <view>
      <Tabs :tabList="tabList"  @tabChange="orderTypeChange" />
    </view>

    <!-- 商品列表楼层渲染 -->
    <view class="product_list">
      <view class="product_container">
        <scroll-view
          v-for="(item, index) in productList"
          :key="index"
          scroll-y="true"
          @scrolltolower="getNextPage"
        >
          <product
            :goods_id="item.goods_id"
            :goods_small_logo="item.goods_small_logo"
            :goods_name="item.goods_name"
            :goods_price="item.goods_price"
          ></product>
        </scroll-view>
      </view>
    </view>
  </view>
</template>

<script>
import seachInput from "../../components/seachInput";
import http from "../utils/http";
import product from "../../components/Product/index";
import Tabs from "../../components/tabs";
export default {
  data() {
    return {
      tabList: ["综合", "销量", "价格"],
      curIndex: 0,
      productList: [],
      pagenum: 1, //当前页数
      cat_id: "",
      query: "",
      pagesize: 10,
      isFinish: false
    };
  },
  components: {
    seachInput,
    product,
    Tabs
  },
  methods: {
    orderTypeChangeGI(index) {
      this.curIndex = index;
      if (index !== 2) {
        // console.log(111);
        this.isFinish = false;
        this.productList = [];
        this.pagenum = 1;
        this.getGoodsList();

        // console.log(data);
      } else {
        this.productList.sort((a, b) => a.goods_price - b.goods_price);
      }
    },
    getNextPage() {
      this.pagenum += 1;
      this.getGoodsList();
    },
    async getGoodsList() {
      if (this.isFinish) return;
      uni.showLoading({
        title: "加载中"
      });
      const data = await http.get("/goods/search", {
        cid: this.cat_id,
        query: this.query,
        pagenum: this.pagenum,
        pagesize: this.pagesize
      });
      uni.hideLoading();
      if (data.goods.length !== 0) {
        this.productList = this.productList.concat(data.goods);
        // console.log(this.productList);
      } else {
        this.isFinish = true;
        // 提示已经最后一页了
        uni.showToast({
          title: "到底了~",
          icon: "none"
        });
      }
    }
  },
  onLoad(e) {
    const { cat_id, query } = e;
    this.cat_id = cat_id || "";
    this.query = query || "";
    this.getGoodsList();
  }
};
</script>

<style lang="less" scoped>
.product_list {
  height: calc(100vh - 200rpx);
  overflow: scroll;
  .product_container {
    .product_item {
      box-sizing: border-box;
      padding: 0 10rpx;
      margin-top: 10rpx;
      display: flex;
      justify-content: center;
      // align-items: center;
      .product_item_img {
        width: 191rpx;
        height: 191rpx;
        image {
          width: 100%;
          height: 100%;
        }
      }
      .product_item_content {
        // height: 191rpx;
        flex: 1;
        display: flex;
        justify-content: space-around;
        flex-direction: column;
        margin-left: 10rpx;
        font-size: 24rpx;
        .product_item_title {
          color: #434343;
        }

        .product_item_price {
          color: #ea4350;
        }
      }
    }
  }
}
</style>